import Vue from 'vue'
import Vuex from 'vuex'
// 在vue里使用vuex
Vue.use(Vuex)
// state (一个保存数据的对象，对象中的数据可以供所有组件使用)
const state = {
  username: ''
}
// mutations(一个对象，保存的是更改state的函数，也只有它能更改state中的值，触发方式this.$store.commit('函数名',参数))
const mutations = {
  // 获取用户名
  setUserName (state, username) {
    state.username = username
    // 将用户名用本地存储储存起来
    localStorage.setItem('username', username)
  },
  getUserName (state) {
    return state.username
  }
}
// actions(一个对象，保存的是触发mutations的函数，让mutations去修改state中的值)
const actions = {
  setUserNameActions: ({ commit }, username) => {
    commit('setUserName', username)
  },
  getUserNameActions: ({commit}) => {
    commit('getUserName')
  }
}
// getters(一个对象，保存的是一些类似与计算属性的函数，可以通过他们得到任何依赖于state的新的数据)
const getters = {
  getUserName: (state) => {
    //   拿到本地存储中的username
    return localStorage.getItem('username')
  }
}
export default new Vuex.Store({
  // 如果添加了严格模式，那么直接修改state中的数据会报错：Do not mutate vuex store state outside mutation handlers，所以还是需要使用mutations中的函数进行数据的修改
  strict: true,
  state,
  getters,
  actions,
  mutations
})
